<template>
	<view>
		<navbar top="80rpx"></navbar>
		<view class="container">
			<view class="header">
				<view class="header-container">
					<view class="tab-list dis-flex">
						<view v-for="(item,index) in tab.list" :key="item.type"
							:class="'tab' + (item.type == tab.current ? ' active' : '')"
							@tap.stop.prevent="toggleTab(item.type)">
							{{ item.title }}
						</view>
					</view>
				</view>
				<view class="header-placeholder"></view>
			</view>
			<view class="given-list">
				<view v-for="item in given.list" :key="item.id" class="given" @tap.stop.prevent="onGivenTap(item)">
					<view class="dis-flex flex-x-between flex-y-center">
						<view class="col-9 f-22">{{ item.create_time }}</view>
						<view class="dis-flex flex-y-center">
							<image v-if="1 == item.log_status" class="given-img" src="/static/images/user/img_up.png"
								mode=""></image>
							<image v-else class="given-img" src="/static/images/user/img_down.png" mode=""></image>
							<view class="m-left10 f-22 col-3">{{ item.log_status_name }}</view>
						</view>
					</view>
					<view class="goods dis-flex m-top20">
						<view class="goods__img-wrapper flex-fixed">
							<image class="goods__img" :src="item.image_url" mode=""></image>
							<view v-if="item.donation_status" class="given__status">{{ item.donation_status.text }}</view>
						</view>
						<view class="flex-box m-left20 m-top10">
							<view class="goods__name col-3 f-28 onelist-hidden--s">{{ item.goods_name }}</view>
							<view class="m-top40 dis-flex flex-x-between flex-y-center f-22">
								<view class="col-9">规格：{{ item.spec_value }}</view>
								<view v-if="item.show_money && 0 < item.transfer_money" class="col-m">
									<text class="f-28">￥{{ item.transfer_money }}</text>
									<text class="f-24">(手续费)</text>
								</view>
							</view>
						</view>
					</view>
					<view v-if="1 == item.is_cancel || 1 == item.need_pay"
						class="given-bottom dis-flex flex-x-end flex-y-center">
						<view v-if="1 == item.is_cancel" class="operation-btn operation-btn--cancel"
							@click.stop="onCancelGiven(item)">取消</view>
						<view v-if="1 == item.need_pay" class="operation-btn operation-btn--pay"
							@click.stop="onPayGiven(item.id)">支付</view>
					</view>
				</view>
			</view>
			<view v-if="!given.loading && 0 == given.list.length" class="yoshop-notcont">
				<text class="iconfont icon-wushuju"></text>
				<view class="cont">亲，暂无赠与记录~</view>
			</view>
		</view>
		<!-- 转增成功弹窗 -->
		<alert :show="alert.showSuccess">
			<view class="given-alert given-success-alert">
				<view class="given-alert-container">
					<view class="img-success">
						<text class="dy-iconfont icon-gou"></text>
					</view>
					<view class="given-success-alert-title">转赠成功</view>
					<view class="assets-info dis-flex flex-y-center">
						<image class="assets__img flex-fixed" :src="alert.info.image_url" mode=""></image>
						<view class="m-left30">
							<view class="assets__name onelist-hidden--s f-30 col-f">{{ alert.info.goods_name }}</view>
							<view class="assets__num">
								<text
									v-if="1 == alert.info.sort_no_status && alert.info.sort_no !== '--'">＃{{ alert.info.sort_no }}</text>
								<text v-else>生成中</text>
							</view>
						</view>
					</view>
					<view class="given-user-info-wrapper">
						<view class="given-user-info">赠予信息</view>
					</view>
					<view class="user__avatar">
						<image :src="alert.info.to_avatarUrl" mode=""></image>
					</view>
					<view class="username m-top30 col-3 f-28">{{ alert.info.to_nickName }}</view>
				</view>
				<view class="btn-close" @tap.stop.prevent="onToggleGivenAssetsSuccessAlert">
					<text class="dy-iconfont icon--cha"></text>
				</view>
			</view>
		</alert>
		<alert :show="alert.showReceive">
			<view class="given-alert receive-alert">
				<view class="given-alert-container">
					<view class="alert-header">
						<view class="user__avatar">
							<image :src="alert.info.send_avatarUrl" mode=""></image>
						</view>
						<view class="username col-3 f-30">{{ alert.info.send_nickName }}</view>
					</view>
					<view class="assets-info dis-flex flex-y-center">
						<image class="assets__img flex-fixed" :src="alert.info.image_url" mode=""></image>
						<view class="m-left30">
							<view class="assets__name onelist-hidden--s f-38 col-3">{{ alert.info.goods_name }}</view>
							<view class="assets__type m-top20 col-3">DIGITAL COLLECTION</view>
							<view class="assets__num">
								<text>序号：</text>
								<text
									v-if="1 == alert.info.sort_no_status && alert.info.sort_no !== '--'">＃{{ alert.info.sort_no }}</text>
								<text v-else>生成中</text>
							</view>
						</view>
					</view>
					<!-- 需要支付 -->
					<button v-if="1 == alert.info.need_pay" type="default" class="btn-normal btn-receive f-30"
						@tap.stop.prevent="onPayGiven(alert.info.id)">收下转赠
						<text v-if="alert.info.show_money && 0 < alert.info.transfer_money"
							class="fee">手续费￥{{ alert.info.transfer_money }}</text>
					</button>
					<button v-else type="default" class="btn-normal btn-receive f-30"
						@tap.stop.prevent="onReceiveAssets(alert.info.id)">收下转赠
						<text v-if="alert.info.show_money && 0 < alert.info.transfer_money"
							class="fee">手续费￥{{ alert.info.transfer_money }}</text>
					</button>
				</view>
				<view class="btn-close" @tap.stop.prevent="onToggleGivenAssetsReceiveAlert">
					<text class="dy-iconfont icon--cha"></text>
				</view>
			</view>
		</alert>
		<pay-popup :show="pay.showPopup" @close="onTogglePayPopup" @selectpaytype="onSelectPayType"></pay-popup>
		<security-password :show="securityPassword.show" :target="securityPassword.target"
			@close="onToggleSecurityPassword" @success="onSecurityPasswordSuccess">
		</security-password>
		<input-alert :show="inputAlert.show" title="请输入验证码" placeholder="验证码" :params="inputAlert.params"
			@cancel="onInputAlertCancel" @confirm="onInputAlertConfirm"></input-alert>
	</view>
</template>

<script>
	import navbar from "@/components/navbar/navbar";
	import alert from "@/components/alert/index.vue";
	import payTypeEnum from '@/utils/enum/PayType';
	import paymentUtils from '@/utils/paymentUtils.js';
	const app = getApp();
	export default {
		components: {
			navbar,
			alert
		},
		data() {
			return {
				tab: {
					list: [{
						title: '全部',
						type: 'all'
					}, {
						title: '我的赠与',
						type: 'send'
					}, {
						title: '收到赠与',
						type: 'receive'
					}],
					current: 'all'
				},
				given: {
					page: 1,
					loading: true,
					hasMore: false,
					list: []
				},
				alert: {
					info: {},
					showSuccess: false, // 显示转增成功弹窗
					showReceive: false, // 显示领取弹窗
				},
				pay: {
					showPopup: false,
					type: 0,
					order_id: 0
				},
				securityPassword: {
					show: false,
					target: 'pay',
				},
				inputAlert: {
					show: false,
					params: null,
				}
			}
		},
		onLoad() {},
		onShow() {
			this.requestData();
		},
		onPullDownRefresh() {
			this.given.page = 1;
			this.requestData(() => {
				uni.stopPullDownRefresh();
			});
		},
		onReachBottom() {
			if (this.given.hasMore && !this.given.loading) {
				this.requestData();
			}
		},
		methods: {
			toggleTab(type) {
				if (type != this.tab.current) {
					this.tab.current = type;
					this.given.page = 1;
					this.requestData();
				}
			},
			requestData(callback) {
				this.given.loading = true;
				uni.showLoading();
				app._get('transfer/myTransfer', {
					page: this.given.page,
					type: this.tab.current
				}, (res) => {
					let {
						data,
						total
					} = res.data;
					let {
						page,
						list,
						hasMore
					} = this.given;
					if (1 == page) {
						list.length = 0;
					}
					list = [...list, ...data];
					hasMore = total > list.length;
					if (hasMore) {
						page++;
					}
					this.given.page = page;
					this.given.list = list;
					this.given.hasMore = hasMore;
				}, null, () => {
					this.given.loading = false;
					uni.hideLoading();
					callback && callback();
				})
			},
			onGivenTap: function(given) {
				/*
				我收到的——未领取前——点击弹出收转赠的弹窗
				我收到的——已收下转赠——点击跳转到藏品详情
				我的转赠——对方未领取前——点击跳转到藏品详情
				我的转赠——对方已领取——点击弹出弹窗，已转赠的弹窗
				log_status 1代表我的转赠 2代表我收到的
				status 0是未领取  1是已经领取
				*/
				if (1 == given.log_status) {
					// 我的转赠
					if (0 == given.status) {
						// 未领取，跳转到藏品详情
						uni.navigateTo({
							url: `/pages/user/assets/detail/detail?order_id=${given.order_id}`
						})
					} else {
						// 已领取，显示已转赠的弹窗
						this.alert.info = given;
						this.onToggleGivenAssetsSuccessAlert();
					}
				} else {
					if (0 == given.status) {
						// 未领取，显示收转赠的弹窗
						this.alert.info = given;
						this.onToggleGivenAssetsReceiveAlert();
					} else {
						// 已领取，跳转到藏品详情
						uni.navigateTo({
							url: `/pages/user/assets/detail/detail?order_id=${given.new_order_id}`
						})
					}
				}
			},
			// 切换转增成功弹窗
			onToggleGivenAssetsSuccessAlert: function(e) {
				this.alert.showSuccess = !this.alert.showSuccess;
			},
			// 切换收下转赠弹窗
			onToggleGivenAssetsReceiveAlert: function(e) {
				this.alert.showReceive = !this.alert.showReceive;
			},
			// 收下藏品
			onReceiveAssets: function(id) {
				uni.showLoading();
				app._post_form('transfer/receiveTransfer', {
					id: id
				}, (res) => {
					app.showSuccess(res.data, () => {
						this.receiveAssetsSuccess();
					});
				}, null, () => {
					uni.hideLoading();
				})
			},
			// 成功收下藏品
			receiveAssetsSuccess: function () {
				// 如果不在“收到的转赠”tab，则切换到此
				if (this.tab.current != 'receive') {
					this.toggleTab('receive');
				} else {
					// 直接刷新数据
					this.given.page = 1;
					this.requestData();
				}
				this.onToggleGivenAssetsReceiveAlert();
			},
			// 取消转赠
			onCancelGiven: function(given) {
				app._post_form('transfer/cancelTransfer', {
					id: given.id
				}, (res) => {
					if (1 == res.code) {
						app.showSuccess(res.data, () => {
							this.requestData();
						});
					}
				})
			},
			// 支付手续费
			onPayGiven: function(id) {
				this.alert.showReceive = false;
				this.pay.order_id = id;
				this.onTogglePayPopup();
			},
			onTogglePayPopup: function() {
				this.pay.showPopup = !this.pay.showPopup;
			},
			onSelectPayType: function(value) {
				this.onTogglePayPopup();
				this.pay.type = value;
				if (PayTypeEnum.BALANCE == value || PayTypeEnum.LL_BALANCE == value) {
					// 余额支付时需输入安全密码
					this.onToggleSecurityPassword();
				} else {
					this.requestPayTransferOrder();
				}
			},
			//////// 安全密码回调 ////////
			// 切换安全密码弹窗的显示
			onToggleSecurityPassword: function() {
				this.securityPassword.show = !this.securityPassword.show;
			},
			// 密码输入正确
			onSecurityPasswordSuccess: function(target) {
				// 余额支付
				this.requestPayTransferOrder();
			},
			//////// 输入框弹窗回调 ////////
			onInputAlertCancel: function() {
				this.onToggleInputAlert();
			},
			onInputAlertConfirm: function(value, target, params) {
				this.requestValidationSms(value, params);
			},
			// 校验验证码
			requestValidationSms: function(verify_code, params) {
				paymentUtils.requestLLBalancePay(verify_code, params, (res)=> {
					// 支付成功
					this.onToggleInputAlert();
					this.requestData();
				});
			},
			onToggleInputAlert: function() {
				this.inputAlert.show = !this.inputAlert.show;
			},
			requestPayTransferOrder: function() {
				uni.showLoading({
					title: '正在处理...'
				});
				paymentUtils.request('transfer/payTransferOrder', {
					transfer_log_id: this.pay.order_id,
					pay_type: this.pay.type
				}, () => {
					// 支付成功
					this.requestData();
				}, (msg) => {
					// 支付失败
					app.showError(msg);
				}, null, (data) => {
					// 请求成功，特殊处理连连余额支付逻辑
					let {
						pay_type,
						payment,
					} = data;
					if (pay_type == PayTypeEnum.LL_BALANCE && '8888' == payment.ret_code) {
						this.inputAlert.params = payment;
						this.onToggleInputAlert();
					}
				}, () => {
					// 请求完成
					uni.hideLoading();
				})
			},
		}
	}
</script>
<style lang="scss">
	page,
	body {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.header .header-container {
		width: 100%;
		height: 100rpx;
		background: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
	}

	.header .header-placeholder {
		height: 100rpx;
	}

	.header .tab-list {
		width: 100%;
		background: #1A1A1A;
		position: absolute;
		left: 0;
		top: 0;
	}

	.header .tab {
		height: 80rpx;
		padding: 0 30rpx;
		line-height: 80rpx;
		position: relative;
		font-size: 24rpx;
		color: #FAF9F9;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}

	.header .tab.active {
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.header .tab.active:after {
		content: "";
		width: 56rpx;
		height: 4rpx;
		background: #FFFFFF;
		border-radius: 2rpx;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	.given-list {
		padding: 0 20rpx 20rpx;
	}

	.given-list .given {
		background: #F9F9F9;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		padding: 20rpx 30rpx;
	}

	.given-list .goods__img-wrapper {
		width: 164rpx;
		height: 164rpx;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
	}

	.given-list .given__status {
		background: rgba(215, 176, 89, 0.72);
		padding: 6rpx;
		border-radius: 10rpx 0 10rpx 0;
		font-size: 20rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.given-list .goods__img {
		width: 100%;
		height: 100%;
	}

	.given-list .given-img {
		width: 28rpx;
		height: 28rpx;
	}

	.given-list .goods__name {
		font-weight: bold;
	}

	.given-success-alert {
		text-align: center;
	}

	.given-alert-container {
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
	}

	.given-success-alert .img-success .dy-iconfont {
		font-size: 66rpx;
		color: $uni-text-color;
	}

	.given-success-alert .given-success-alert-title {
		margin-top: 30rpx;
		margin-bottom: 70rpx;
		font-size: 38rpx;
		color: $uni-text-color;
	}

	.given-success-alert .given-user-info-wrapper {
		margin-top: 70rpx;
		text-align: center;
	}

	.given-success-alert .given-user-info {
		display: inline-block;
		position: relative;
		padding: 0 116rpx;
	}

	.given-success-alert .given-user-info:before,
	.given-success-alert .given-user-info:after {
		content: "";
		width: 96rpx;
		height: 1px;
		background: #CCCCCC;
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.given-success-alert .given-user-info:before {
		left: 0;
	}

	.given-success-alert .given-user-info:after {
		right: 0;
	}

	.given-success-alert .user__avatar {
		margin: 40rpx auto 0;
	}

	.given-alert .btn-close {
		width: 100rpx;
		height: 100rpx;
		margin: 20rpx auto;
		text-align: center;
		line-height: 100rpx;
	}

	.given-alert .btn-close text {
		color: $uni-text-color-inverse;
		font-size: 56rpx;
	}

	.given-alert .user__avatar {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.given-alert .user__avatar image {
		width: 100%;
		height: 100%;
	}

	.given-alert .assets-info {
		height: 200rpx;
		background: #1C1C1C;
		border-radius: 20rpx;
		padding: 0 30rpx;
	}

	.given-alert .assets__img {
		width: 146rpx;
		height: 146rpx;
		border-radius: 14rpx;
	}

	.given-alert .assets__num {
		margin-top: 20rpx;
		text-align: left;
	}

	.given-alert .assets__num text {
		height: 40rpx;
		background: #F5F5F5;
		padding: 0 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: $uni-text-color-grey;
		line-height: 40rpx;
	}

	.receive-alert .given-alert-container {
		padding: 0 0 70rpx 0;
	}

	.receive-alert .alert-header {
		height: 180rpx;
		background: #F9F9F9;
		position: relative;
		border-radius: 30rpx 30rpx 0 0;
	}

	.receive-alert .user__avatar {
		width: 160rpx;
		height: 160rpx;
		position: absolute;
		top: -80rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.receive-alert .username {
		padding-top: 100rpx;
		text-align: center;
	}

	.receive-alert .assets-info {
		background: #fff;
		-webkit-box-shadow: 0px 0px 10rpx 8rpx rgba(0, 0, 0, 0.1) inset;
		box-shadow: 0px 0px 10rpx 8rpx rgba(0, 0, 0, 0.1) inset;
		margin: 80rpx 40rpx 0 40rpx;
		padding: 30rpx;
	}

	.receive-alert .assets__type {
		font-size: 14rpx;
	}

	.receive-alert .assets__img {
		width: 170rpx;
		height: 170rpx;
		border-radius: 0;
		-webkit-box-shadow: 0px 0px 10rpx 8rpx rgba(0, 0, 0, 0.1);
		box-shadow: 0px 0px 10rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.receive-alert .assets__num text {
		background: #fff;
		padding: 0;
		border-radius: 0;
		font-weight: normal;
		color: #B1B1B1;
	}

	.receive-alert .btn-receive {
		height: 100rpx;
		background: $uni-bg-color;
		border-radius: 10rpx;
		margin: 110rpx 40rpx 0 40rpx;
		color: $uni-text-color-inverse !important;
		text-align: center;
		line-height: 100rpx;
	}

	.receive-alert .btn-receive .fee {
		color: $uni-text-color-grey;
		font-size: 22rpx;
		position: absolute;
		bottom: 0;
		left: 65%;
	}

	.given-bottom .operation-btn {
		width: 130rpx;
		height: 52rpx;
		border-radius: 26rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: calc(52rpx - 2px);
	}

	.given-bottom .operation-btn--cancel {
		border: 1px solid #666666;
		color: #666666;
	}

	.given-bottom .operation-btn--pay {
		border: 1px solid $uni-border-color-main;
		color: $uni-border-color-main;
	}

	.given-bottom .operation-btn+.operation-btn {
		margin-left: 20rpx;
	}
</style>
